<template>
    <el-dialog v-model="dialogVisible" title="新增" width="600" @closed="close">
        <el-form ref="formRef" :model="editForm" label-width="120px" :rules="rules">
            <el-form-item :label="TableLabel.ShopCode + ': '" prop="ShopCode">
                <el-input v-model.trim="editForm.ShopCode" :placeholder="'请输入' + TableLabel.ShopCode" clearable></el-input>
            </el-form-item>
            <el-form-item :label="TableLabel.ShopName + ': '" prop="ShopName">
                <el-input v-model.trim="editForm.ShopName" :placeholder="'请输入' + TableLabel.ShopName" clearable></el-input>
            </el-form-item>
            <el-form-item :label="TableLabel.DishGuid + ': '" prop="DishGuid">
                <el-input v-model.trim="editForm.DishGuid" :placeholder="'请输入' + TableLabel.DishGuid" clearable></el-input>
            </el-form-item>
            <el-form-item :label="TableLabel.DishCode + ': '" prop="DishCode">
                <el-input v-model.trim="editForm.DishCode" :placeholder="'请输入' + TableLabel.DishCode" clearable></el-input>
            </el-form-item>
            <el-form-item :label="TableLabel.DishName + ': '" prop="DishName">
                <el-input v-model.trim="editForm.DishName" :placeholder="'请输入' + TableLabel.DishName" clearable></el-input>
            </el-form-item>
            <el-form-item :label="TableLabel.Price + ': '" prop="Price">
                <el-input v-model.trim="editForm.Price" :placeholder="'请输入' + TableLabel.Price" clearable></el-input>
            </el-form-item>
            <el-form-item :label="TableLabel.Extra + ': '">
                <el-input v-model.trim="editForm.Extra" :placeholder="'请输入' + TableLabel.Extra + ' (json字符串格式)'"
                    clearable></el-input>
            </el-form-item>
        </el-form>

        <template #footer>
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="Submit" :loading="loading">提交</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { TableLabel } from "./ConfigData"
import * as types from "./types"
import { LabelPrintRecordApi } from "@/api/factory_manager/label_print_record"
import { FormInstance, FormRules } from "element-plus";
import MessageUti from "@/library/utils/MessageUti"

const props = defineProps<{
    visible: types.EditDialogType['visible']
}>()

const emit = defineEmits<{
    (e: 'submitSuccess'): void
    (e: "update:visible", visible: boolean): void
}>()

const dialogVisible = computed({
    get: () => props.visible,
    set: (val) => emit("update:visible", val)
})

const initForm: types.EditDialogType['editForm'] = {
    ShopCode: "",
    ShopName: "",
    DishGuid: "",
    DishCode: "",
    DishName: "",
    Price: "",
    Extra: ""
}
const editForm = ref({ ...initForm })
const formRef = ref<FormInstance>()
const rules: FormRules = {
    ShopCode: { required: true, message: "请输入" + TableLabel.ShopCode, trigger: "blur" },
    ShopName: { required: true, message: "请输入" + TableLabel.ShopName, trigger: "blur" },
    DishGuid: { required: true, message: "请输入" + TableLabel.DishGuid, trigger: "blur" },
    DishCode: { required: true, message: "请输入" + TableLabel.DishCode, trigger: "blur" },
    DishName: { required: true, message: "请输入" + TableLabel.DishName, trigger: "blur" },
    Price: { required: true, message: "请输入" + TableLabel.Price, trigger: "blur" },
}

const loading = ref(false)
const Submit = async () => {
    const valid = await formRef.value?.validate(() => { })
    if (!valid) { return }

    try {
        loading.value = true
        await LabelPrintRecordApi.Insert(editForm.value)
        close()
        emit("submitSuccess")
        MessageUti.showSuccess("新增成功")
    }
    catch (error) { }
    finally {
        loading.value = false
    }
}

const close = () => {
    dialogVisible.value = false
    editForm.value = { ...initForm }
    formRef.value?.resetFields()
}

</script>

<style scoped></style>